<template>
	<div style="z-index:9999;overflow:hidden;" v-if="status">
		<!-- 蒙版 -->
		<div v-if="mask" :style="getMaskColor" class="mask" @click="hidden"></div>

		<!-- 内容区域 -->
		<div ref="popup" class="mask-content free-animated" :class="bottom?'getbodysite':''" :style="getBodyStyle">
			<slot></slot>
		</div>



	</div>
</template>

<script>
	//#ifdef APP-NVUE
	const animation = weex.requireModule('animation')
	//#endif
	export default {
		data() {
			return {
				x: -1,
				y: 1,
				maxX: 0,
				maxY: 0,
				status: false
				// maskColor:true
			}
		},
		props: {
			//蒙版颜色
			maskColor: {
				type: Boolean,
				default: false
			},
			//是否开启蒙版
			mask: {
				type: Boolean,
				default: true
			},
			//判断弹出层是否在底部
			bottom: {
				type: Boolean,
				default: false
			},
			// 弹出层的宽度
			bodyWidth: {
				type: Number,
				default: 0
			},
			// 弹出层的高度
			bodyHeight: {
				type: Number,
				default: 0
			}
		},
		mounted() {
			try {
				//获取手机设备的各种信息，全部保存在res中
				const res = uni.getSystemInfoSync();
				this.maxX = res.windowWidth - uni.upx2px(this.bodyWidth);
				this.maxY = res.windowHeight - uni.upx2px(this.bodyHeight);
				console.log(this.maxX, this.maxY)
			} catch (e) {
				//error
			}


		},
		methods: {
			show(x = -1, y = -1) {
				this.x = (x > this.maxX) ? this.maxX : x
				this.y = (y > this.maxY) ? this.maxY : y
				this.status = true

				this.$nextTick(() => {
					animation.transition(this.$refs.popup, {
						styles: {
							transform: 'scale(1,1)',
							transformOrigin: 'left top',
							opacity: 1
						},
						duration: 200, //ms
						timingFunction: 'ease',
					}, function() {
						console.log('动画执行结束')
					})
				})

			},
			hidden() {
				animation.transition(this.$refs.popup, {
					styles: {
						transform: 'scale(0,0)',
						transformOrigin: 'left top',
						opacity: 0
					},
					duration: 200, //ms
					timingFunction: 'ease',
				},()=>{
					this.status = false
					console.log('动画执行结束');
				})

			}
		},
		computed: {
			getMaskColor() {
				let i = this.maskColor ? 0.5 : 0
				return `background-color:rgba(0,0,0,${i})`
			},
			getBodySite() {
				let bottom = this.bottom ? 'getbodysite' : ''
				return `bottom`
			},
			getBodyStyle() {
				let left = this.x > -1 ? `left:${this.x}px;` : ''
				let top = this.y > -1 ? `top:${this.y}px;` : ''
				return left + top
			}

		}





	}
</script>

<style scoped>
	.mask {
		/* z-index:9999; */
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.mask-content {
		/* right: 0; */
		/* bottom: 100rpx; */
		/* top: 100rpx; */
		/* left: 0rpx; */
		position: fixed;
		background-color: #FFFFFF;
	}

	.free-animated {
		/* #ifdef APP-PLUS-NVUE */
		transform: scale(0, 0);
		opacity: 0;
		/* #endif */
	}

	/* 弹出层样式 */
	.getbodysite {
		left: 0;
		right: 0;
		bottom: 0;
		/* position: fixed; */
		height: 300rpx;
	}
</style>
